<script type="text/x-template" id="keybinds-settings">
    <div class="keybinds-page">
        <div class="md-option-header">
            <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
        </div>
        <div class="settings-option-body">
            <div class="md-option-header-sub">
                <span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.search')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('search')">
                        {{app.cfg.general.keybindings.search.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.listnow')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('listnow')">
                        {{app.cfg.general.keybindings.listnow.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.browse')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('browse')">
                        {{app.cfg.general.keybindings.browse.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.recentAdd')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('recentAdd')">
                        {{app.cfg.general.keybindings.recentAdd.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.songs')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('songs')">
                        {{app.cfg.general.keybindings.songs.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.albums')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('albums')">
                        {{app.cfg.general.keybindings.albums.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.artists')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('artists')">
                        {{app.cfg.general.keybindings.artists.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-header-sub">
                <span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.private')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('togglePrivateSession')">
                        {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-header-sub">
                <span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.remote')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('webRemote')">
                        {{app.cfg.general.keybindings.webRemote.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.audio')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('audioSettings')">
                        {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.plugins')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('pluginMenu')">
                        {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.cast')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('castToDevices')">
                        {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.settings')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('settings')">
                        {{app.cfg.general.keybindings.settings.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-header-sub" v-if="app.platform !== 'darwin'">
                <span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
            </div>
            <div class="md-option-line" v-if="app.platform !== 'darwin'">
                <div class="md-option-segment">
                    {{$root.getLz('term.zoomin')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('zoomn')">
                        {{app.cfg.general.keybindings.zoomn.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line" v-if="app.platform !== 'darwin'">
                <div class="md-option-segment">
                    {{$root.getLz('term.zoomout')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('zoomt')">
                        {{app.cfg.general.keybindings.zoomt.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-line" v-if="app.platform !== 'darwin'">
                <div class="md-option-segment">
                    {{$root.getLz('term.zoomreset')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('zoomrst')">
                        {{app.cfg.general.keybindings.zoomrst.join(' + ')}}
                    </button>
                </div>
            </div>
            <div class="md-option-header-sub">
                <span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
            </div>
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('settings.description.developer')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <button class="md-btn md-btn-small md-btn-block"
                            @click="keyBindUpdate('openDeveloperTools')">
                        {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
                    </button>
                </div>
            </div>
            <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
                {{$root.getLz('term.reset')}}
            </button>
        </div>

    </div>
</script>

<script>
  Vue.component('keybinds-settings', {
    template: "#keybinds-settings",
    props: [],
    data: function() {
      return {
        app: this.$root
      }
    },
    methods: {
      keyBindUpdate: function(action) {
        const blur = document.createElement('div');
        blur.className = 'blur';
        blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
        blur.style.position = 'fixed';
        blur.style.top = '0';
        blur.style.left = '0';
        blur.style.width = '100%';
        blur.style.height = '100%';
        blur.style.zIndex = '9999';
        blur.style.display = 'flex';
        blur.style.alignItems = 'center';
        blur.style.justifyContent = 'center';
        blur.style.fontSize = '2em';
        blur.style.color = 'white';
        blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
        document.body.appendChild(blur);

        let keyBind = [];
        const keyBindTimeout = setTimeout(function() {
          keyBind = [];
          document.body.removeChild(blur);
        }, 30000);
        const keyBindUpdate = function(e) {
          if (document.body.contains(blur)) {
            if (e.key == 'Escape') {
              document.body.removeChild(blur);
              clearTimeout(keyBindTimeout);
              return;
            } else {
              if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
                keyBind.push(e.key.toUpperCase());
              } else {
                keyBind.push(e.key);
              }
              if (keyBind.length === 2) {
                if (keyBind[0] !== keyBind[1]) {
                  app.cfg.general.keybindings[action] = keyBind
                  document.body.removeChild(blur);
                  clearTimeout(keyBindTimeout);
                  notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
                  app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
                    if (ok) ipcRenderer.invoke("relaunchApp")
                  })
                } else {
                  keyBind = [];
                }
              }
            }
          }
        };
        document.addEventListener('keydown', keyBindUpdate);
      },
      keyBindReset: function() {
        app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
        app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
        app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
        app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
        app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
        app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
        app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
        app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
        app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
        app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
        app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
        app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
        app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
        app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
        app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
        app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
        app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
        notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
        app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
          if (ok) ipcRenderer.invoke("relaunchApp")
        })
      },
      getLanguages: function() {
        let langs = this.$root.lzListing
        let categories = {
          "main": [],
          "fun": [],
          "unsorted": []
        }
        // sort by category if category is undefined or empty put it in "unsorted"
        for (let i = 0; i < langs.length; i++) {
          if (langs[i].category === undefined || langs[i].category === "") {
            categories.unsorted.push(langs[i])
          } else {
            categories[langs[i].category].push(langs[i])
          }
        }
        // return
        return categories
      },
    }
  })
</script>
